<template>
  <el-calendar>
  <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
  <template
    slot="dateCell"
    slot-scope="{date, data}">
    <p :class="data.isSelected ? 'is-selected' : ''">{{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '✔️' : ''}}</p>
    <p v-if="haveExam(data)" style="color:#e6a23c"><i class="el-icon-edit"></i>考试...</p>
  </template>
</el-calendar>
</template>

<script>
import { getExamTime } from "../../api/user";
export default {
  data() {
    return {
      params: {},
      examDateList: [],
    }
  },
  created() {
    this.params = JSON.parse(window.localStorage.getItem('userInfo'))
    this.getExamTime()
  },
  methods: {
    async getExamTime() {
      await getExamTime({
        account: this.params.account,
        username: this.params.username,
      })
        .then((res) => {
          this.examDateList = res.examDateList
        })
    },
    haveExam(date) {
      for (let i = 0; i < this.examDateList.length; i++) {
        let examDate = new Date(this.examDateList[i])
        let Y = examDate.getFullYear() + '-'
        let M = (examDate.getMonth() + 1 < 10 ? '0' + (examDate.getMonth() + 1) : examDate.getMonth() + 1) + '-'
        let D = examDate.getDate() < 10 ? '0'+ examDate.getDate() : examDate.getDate()
        if (date.day == Y + M + D) { return true }
      }
      return false
    },
  },
}
</script>

<style>
  .is-selected {
    color: #1989FA;
  }
</style>